<template>
    <div class="category-box">
      <header class="category-header wrap  " >
        <i class="iconfont icon-fanhui1"></i>
        <div class="header-search">
          <i class="iconfont icon-sousuo"></i>
          <span class="search-title">
            <router-link to="./product-list?from=category">
              全场50元起步
            </router-link>
          </span>
        </div>
        <i class="iconfont icon-gengduo1"></i>
      </header>
      <div
        class="search-wrap"
        ref="searchWrap"
      >
        <ListScroll
          class='nav-side-wrapper'
          :scrollData=categoryData
        >
          <ul class="nav-side">
            <li
              v-for="item in categoryData"
              :key="item.Id"
              @click="selectMenu(item.Id)"
              :class="{active:currentIndex ==item.Id}"
            >
              {{item.ClassName}}
            </li>
          </ul>
        </ListScroll>
        <div class="search-content">
          <ListScroll
            :scrollData="categoryData"
          >
            <div class="scroll-content">
              <template v-for="item, index in categoryData">
                <div
                  class="swiper-slide"
                  v-if="currentIndex ==item.Id"
                  :key="index"
                >
                  <div
                    class="category-list"
                    v-for="products, index in item.Cat2"
                    :key="index"
                  >
                    <p class="category-title">{{products.ClassName}}</p>
                    <div
                      class="product-item"
                      v-for="product, index in products.Cat3"
                      :key="index"
                      @click="selectProduct(product)"
                    >
                      <img
                        src="//s.weituibao.com/1583591077131/%E5%88%86%E7%B1%BB.png"
                        class="product-img"
                      />
                      <p class="product-title">{{product.ClassName}}</p>
                    </div>
                  </div>
                </div>
              </template>
            </div>
          </ListScroll>
        </div>
      </div>
    </div>
  </template>
  
  <script lang="ts" setup>
  import { onMounted, ref, toRefs } from "vue";
  import { useRouter } from "vue-router";
  import ListScroll from "../components/ListScroll.vue";
  import { getGoods } from "../service/good.ts";
  const categoryData = ref();
  const currentIndex = ref(12);
  const searchWrap = ref<HTMLDivElement>();
  const router = useRouter()
  async function requestCategoryData() {
    const { data } = await getGoods();
    categoryData.value = data;
  }
  function selectMenu(index: number) {
    currentIndex.value = index;


  

    // console.log(index);
    // console.log(currentIndex);
  }
  function pulldown() {
    // console.log("下拉");
  }
  function toEnd() {
    // console.log("toEnd");

  }
  
  function setWrapHeight() {


    const $screenHeight = document.documentElement.clientHeight;
 

    (searchWrap.value as HTMLDivElement).style.height =
      $screenHeight - 100 + "px";
 
    // console.log(123);
  
    // console.log($screenHeight);
    // console.log(456);
    (searchWrap.value as HTMLDivElement).style.height =
      $screenHeight - 100 + "px";
    // console.log(searchWrap.value?.style.height);


  
  }
  
  onMounted(() => {
    setWrapHeight()
    requestCategoryData();
  });
  function selectProduct(item:any):void{ 
    router.push({
        name:'product-list',
        query:{
            Id:item.Id
        }
    })
    // 这里不能传一个对象，传对象的话字符串拼接不过去
    //  router.push(`product-list?Id=${item.Id}`)
  
  }
  </script>
  
  <style lang="less" scoped>
  @import "../common/style/mixin.less";
  .category-box {
    .category-header {
      background: #fff;
      position: fixed;
      left: 0;
      top: 0;
      .fj();
      .wh(100%,50px);
      line-height: 50px;
      padding: 0 15px;
      .boxSizing();
      font-size: 15px;
      color: #656771;
      z-index: 10000;
      &.active {
        background: @primary;
      }
      .icon-fanhui1 {
        font-size: 16px;
        font-weight: normal;
      }
      
      .header-search {
        display: flex;
        .wh(80%,20px);
        line-height: 20px;
        margin: 10px 0;
        padding: 5px 0;
        color: #232326;
        background: #f7f7f7;
        border-radius: 20px;
        .icon-sousuo {
          padding: 0 10px 0 20px;
          font-size: 17px;
        }
        .search-title {
          a {
            font-size: 12px;
            color: #666;
          }
        }
      }
      .icon-gengduo1 {
        font-size: 16px;
        font-weight: normal;
      }
    }
    .search-wrap {
      .fj();
      width: 100%;
      margin-top: 50px;
      border-top: 1px solid #999;
      .nav-side-wrapper {
        width: 28%;
        .nav-side {
          position: fixed;
          //width: 100%;
          width: 28%;
          .boxSizing();
          background: #f8f8f8;
          li {
            width: 100%;
            height: 56px;
            text-align: center;
            line-height: 56px;
            font-size: 14px;
            text-overflow: ellipsis; /* 省略号 */
            &.active {
              color: @primary;
              background: #fff;
            }
          }
        }
      }
      .search-content {
        width: 72%;
        height: 300px;
        padding: 0 10px;
        //background: #fff;
        .boxSizing();
        .scroll-content {
          padding-bottom: 35px;
          width: 100%;
          .swiper-slide {
            width: 100%;
            .category-list {
              //background-color: aqua;
              display: flex;
              flex-wrap: wrap;
              flex-shrink: 0;
              width: 100%;
              .category-title {
                width: 100%;
                font-size: 17px;
                font-weight: 500;
                padding: 20px 0;
                text-align: left;
              }
              .product-title {
                text-overflow: ellipsis;
              }
              .product-item {
                width: 33.3333%;
                margin-bottom: 10px;
                text-align: center;
                font-size: 15px;
                .product-img {
                  .wh(30px, 30px);
                }
              }
            }
          }
        }
      }
    }
  }
  </style>